<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>环保益家-垃圾分类管理平台</title>
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/weigui.css">
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/js.js"></script>
	</head>
	<body>
		<div class="header">
			<div class="time clearfix">
				<div class="shijian" id="shijian">12:00</div>
				<div class="riqi">
					<p class="yue" id="yue">2020-2-13</p>
					<p class="zhou" id="zhou">星期四</p>
				</div>
				<div class="shuju">
					<font>今日数据</font>
					<span class="point ml10"><i></i></span>
					<div class="tan" style="display: none;">
						<div class="title">历史数据</div>
						<ul class="clearfix">
							<li><a href="javascript:;" class="on" data1=1 data2=0>今日</a></li>
							<li><a href="javascript:;" data1=1 data2=1>昨日</a></li>
							<li><a href="javascript:;" data1=2 data2=0>本周</a></li>
							<li><a href="javascript:;" data1=3 data2=0>本月</a></li>
							<li><a href="javascript:;" data1=5 data2=0>本年</a></li>
							<li><a href="javascript:;"data1=2 data2=1>上周</a></li>
							<li></li>
							<li><a href="javascript:;"data1=3 data2=1>上月</a></li>
							<li></li>
							<li><a href="javascript:;" data1=5 data2=1>上年</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="title">环保益家-垃圾分类管理平台</div>
			<ul class="nav clearfix">
				<li><span class="star">★</span><a href="">站点管理</a></li>
				<li><span class="star">★</span><a href="">督导管理</a></li>
				<li><span class="star">★</span><a href="">车辆管理</a></li>
			</ul>
		</div>
		<div class="main clearfix">
			<div class="box m-left">
				<div class="box1">
					<div class="title">
						<span class="point mr5"><i></i></span>
						违规事件
					</div>
					<div class="num"></div>
					<div class="content">
						<div id="echart1" style="width: 100%; height:100%;"></div>
						<div class="num1"></div>
					</div>
				</div>
				
				<div class="box2">
					<div class="title">
						<span class="point mr5"><i></i></span>
						违规数据
					</div>
					<ul class="content clearfix list">
						<li class="clearfix">
							<div class="item-l">
								<img src="img/pic.png" alt="">
							</div>
							<div class="item-c">
								<p class="p1">万达社区A1栋4号</p>
								<p class="p2">未在指定地点投放</p>
							</div>
							<div class="item-r">
								<p class="p1">检查：刘先生</p>
								<p class="p2">2020-02-05 08:30</p>
							</div>
						</li>
						<li class="clearfix on">
							<div class="item-l">
								<img src="img/pic.png" alt="">
							</div>
							<div class="item-c">
								<p class="p1">万达社区A1栋4号</p>
								<p class="p2">未在指定地点投放</p>
							</div>
							<div class="item-r">
								<p class="p1">检查：刘先生</p>
								<p class="p2">2020-02-05 08:30</p>
							</div>
						</li>
						<li class="clearfix">
							<div class="item-l">
								<img src="img/pic.png" alt="">
							</div>
							<div class="item-c">
								<p class="p1">万达社区A1栋4号</p>
								<p class="p2">未在指定地点投放</p>
							</div>
							<div class="item-r">
								<p class="p1">检查：刘先生</p>
								<p class="p2">2020-02-05 08:30</p>
							</div>
						</li>
						<li class="clearfix">
							<div class="item-l">
								<img src="img/pic.png" alt="">
							</div>
							<div class="item-c">
								<p class="p1">万达社区A1栋4号</p>
								<p class="p2">未在指定地点投放</p>
							</div>
							<div class="item-r">
								<p class="p1">检查：刘先生</p>
								<p class="p2">2020-02-05 08:30</p>
							</div>
						</li>
						<li class="clearfix">
							<div class="item-l">
								<img src="img/pic.png" alt="">
							</div>
							<div class="item-c">
								<p class="p1">万达社区A1栋4号</p>
								<p class="p2">未在指定地点投放</p>
							</div>
							<div class="item-r">
								<p class="p1">检查：刘先生</p>
								<p class="p2">2020-02-05 08:30</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="box m-center">
				<div class="c-top">
					<ul class="clearfix">
						<li>
							<div class="star">★</div>
							<div class="text text1">
								<p>督导员（人）</p>
								<p>199/192</p>
								<p>应到/在岗</p>
							</div>
						</li>
						<li>
							<div class="star">★</div>
							<div class="text text1">
								<p>巡查（人）</p>
								<p>99/92</p>
								<p>应到/在岗</p>
							</div>
						</li>
						<li>
							<div class="star">★</div>
							<div class="text text1">
								<p>管理员（人）</p>
								<p>99/92</p>
								<p>应到/在岗</p>
							</div>
						</li>
					</ul>
				</div>
				<div class="c-bottom">
					<div id="allmap" style="width: 100%; height:100%;"></div>
				</div>
			</div>
			<div class="box m-right">
				<div class="box1">
					<div class="title">
						<span class="point mr5"><i></i></span>
						近10日违规趋势
					</div>
					<div id="echart2" style="width: 100%; height:100%;"></div>
				</div>
				<div class="box2">
					<div class="title">
						<span class="point mr5"><i></i></span>
						违规地区排名
					</div>
					<div id="echart3" style="width: 100%; height:100%;"></div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/echarts.js"></script>
	<script type="text/javascript" src="js/md5.js"></script>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=2NABy5ccZ5eWbuVL6AowgQ9hauA44Eqr"></script>
	<script src="js/biao1.js"></script>
	<script src="js/apiweigui.js"></script>
	<script src="js/map.js"></script>
	<script type="text/javascript">
		// 人员分类汇总统计(图中上)
		getData1('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getworkerData')
		// 人员分类汇总统计(图左上)
		getData2('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getviolationData')
		// 右下
		getData3('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getviolationSiteTop')
		// 右上
		getData4('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getviolationtrend')
		// 左下
		getData5('http://www.xuebanjicai.com:8166/Apps/ws/101/api/screen_data.asmx/getviolationDataList')
		
		
		$('.list').on('click','li',function(){
			$(this).siblings().removeClass("on")
			$(this).addClass("on")
			console.log(info[$(this).index()])
			showmark(info[$(this).index()])
		})
		
		
		
		$("body").css('minHeight',document.documentElement.clientHeight)
		if($('.now')){
			formDate()
		}
		$('.shuju font').click(function(e){
			e.stopPropagation()
			$('.tan').slideToggle()
		})
		$('body').click(function(e){
			e.stopPropagation()
			$('.tan').slideUp()
		})
		$('.tan a').click(function(e){
			$('.shuju font').html($(this).text()+'数据')
			$(this).parent().siblings().children().removeClass('on')
			$(this).addClass('on')
// 			rptType=$(this).attr('data1')
// 			rpttime=$(this).attr('data2')
			if(rptType==1&&rpttime==0){
				$('.sjd').hide()
				$('.now').show()
			}else if(rptType==1&&rpttime==1){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showYesterDay()}</span> -
					<span class="after">${showToDay()}</span>
				`)
			}else if(rptType==2&&rpttime==0){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showWeekFirstDay()}</span> -
					<span class="after">${showToDay()}</span>
				`)
			}else if(rptType==2&&rpttime==1){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showLastWeek()}</span> -
					<span class="after">${showLastWeekDay()}</span>
				`)
			}else if(rptType==3&&rpttime==0){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showMonthFirstDay()}</span> -
					<span class="after">${showToDay()}</span>
				`)
			}else if(rptType==3&&rpttime==1){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showLastMonthFirstDay()}</span> -
					<span class="after">${showLastMonthDay()}</span>
				`)
			}else if(rptType==5&&rpttime==0){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showYearFirstDay()}</span> -
					<span class="after">${showYearDay()}</span>
				`)
			}else if(rptType==5&&rpttime==1){
				$('.now').hide()
				$('.sjd').show()
				$('.sjd').html(`
					<span class="before">${showLastYearFirstDay()}</span> -
					<span class="after">${showLastYearDay()}</span>
				`)
			}
		})
	</script>
</html>